// 未结明细
<template>
  <el-row class="content">

    <div>
      <table class="myTable">
        <thead>
          <tr>
            <th>
              注单号
            </th>
            <th>
              时间
            </th>
            <th>
              类型
            </th>
            <th>
              玩法
            </th>
            <th>
              盘口
            </th>
            <th>
              下注金额
            </th>
            <th>
              退水(%)
            </th>
            <th>
              可赢金额
            </th>
          </tr>
        </thead>
        <tbody v-if="list.length > 0">
          <tr v-for="(item,index) in list" :key="'row'+index" class="myTableTr">
            <td>
              {{item.order_no}}
            </td>
            <td>
              <ul>
                <li>
                  {{item.open_date}}
                </li>
                <li>
                  {{item.time}}
                </li>
              </ul>
            </td>
            <td>
              <ul>
                <li>
                  {{item.game.name}}
                </li>
                <li class="greenLi">
                  {{item.period}}
                </li>
              </ul>
            </td>
            <td>
              <ul>
                <!--<li v-for="(subItem,index) in item.item" :key="'rowLi'+index" class="gameRules">-->
                  <!--{{subItem}}-->
                <!--</li>-->
                <li>
                  <span class="Purple">{{item.option_title_name}}</span>
                  <span class="gameRules">@</span>
                  <span class="Red">{{item.odds}}</span>
                </li>
                <li> <span class="gameRules">{{item.content}}</span></li>
              </ul>
            </td>
            <td>
              {{item.handicaps}}
            </td>
            <td>
              {{item.amount}}
            </td>
            <td>
              {{item.commission}}%
            </td>
            <td>
              <span :class="parseFloat(item.max_win) >= 0?'blueSpan':'redSpan'">
                {{item.max_win}}
              </span>
            </td>
          </tr>
        <tr class="myTableTfoot">
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td>总计</td>
          <td>{{memberRaw.page_sum_amount}}</td>
          <td></td>
          <td>
            <span :class="parseFloat(memberRaw.page_sum_max_win) >= 0?'blueSpan':'redSpan'">
                {{memberRaw.page_sum_max_win}}
              </span>
          </td>
        </tr>
        </tbody>
        <tbody v-else>
          <tr>
            <td colspan="8">
              暂无数据！
            </td>
          </tr>
        </tbody>
      </table>

      <div v-if="pageNums" class="bottomPagination">
        <ul>
          共{{memberRaw.pagination.totalCount}}笔记录 共{{lastPage}}页
          <button @click="fetchData(1)" :class="{'active':currentPage != 1}" :disabled="!(currentPage != 1)">
            首页
          </button>
          | 跳转至 <input type="number" @keyup="geOtherPageNum(pageNum, $event)" v-model="pageNum"> 页
          <button @click="fetchData(--currentPage)" :class="{'active':currentPage != 1}" :disabled="!(currentPage != 1)">前一页</button>
          『
          <button v-for="(item, index) in pageNums" :disabled="!(currentPage != item)" :key="'btn'+index" @click="fetchData(item)" :class="{'active':currentPage != item}">
            {{item}}
          </button>
          』
          <button @click="fetchData(++currentPage)" :disabled="!(lastPage != currentPage)" :class="{'active':lastPage != currentPage}">后一页</button>
           |
          <button @click="fetchData(lastPage)" :disabled="!(lastPage != currentPage)" :class="{'active':lastPage != currentPage}">末页</button>
        </ul>
      </div>
    </div>
  </el-row>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { user as userMap } from '@/utils/map' // 参数映射

  export default {
    computed: {
      ...mapGetters(['memberRaw']),
      list() {
        var data = []
        if (this.memberRaw.list.length > 0) {
          for (var i = 0; i < this.memberRaw.list.length; i++) {
            var item = this.memberRaw.list[i]
            item.time = this.time(item.created_at)
            data.push(item)
          }
        }
        return data
      },
      pageNums() {
        const num = Math.ceil(parseInt(this.memberRaw.pagination.totalCount) / parseInt(this.memberRaw.pagination.defaultPageSize))
        this.lastPage = num
        var left=1
        var right=num
        const ArrayNum = []
        var condition=10
        var middle=condition/2
        if(num>= condition){
          // 中间的时候
          // 左右都加上（middle-1)
          if(this.currentPage > middle && this.currentPage < num-(middle-1)){
            left = this.currentPage - (middle-1)
            right = this.currentPage + (middle-1)
          }else{
            //最左边或者在condition的中间
            if(this.currentPage<=middle){
              left = 1
              right = condition
              // 最右边的情况
              // 结束是总条数，开始是condition减去1
            }else{
              right =num
              left = num -(condition-1)
            }
          }
        }
        while (left<=right){
          ArrayNum.push(left)
          left++
        }
        return ArrayNum
      }
      },

    data() {
      return {
        pageNum: '',
        loading: false,
        userMap: userMap, // 用户字段映射
        currentPage: 1,
        lastPage: null,
        pageSize: 15,   // 每页显示条数
      }
    },

    // 数据格式化
    filters: {},

    async created() {
      await this.fetchData(1)
    },
    methods: {
      geOtherPageNum(value, e) {
        const key = window.event ? e.keyCode : e.which
        if (key === 13) {
          if (value > this.lastPage) {
            alert('页面不存在')
          } else {
            this.fetchData(value)
          }
        }
      },
      getSummaries(param) {
        const { columns, data } = param
        const sums = []
        columns.forEach((column, index) => {
          if (index === 4) {
            sums[index] = '总计'
            return
          }
          if (index === 0) {
            sums[index] = ''
            return
          }
          if (index === 1) {
            sums[index] = ''
            return
          }
          if (index === 6) {
            sums[index] = ''
            return
          }
          if (index === 5) {
            if (this.memberRaw.list.length) {
              sums[index] = this.memberRaw.page_sum_amount
            } else {
              sums[index] = 0
            }

            return
          }
          if (index === 7) {
            if (this.memberRaw.list.length) {
              sums[index] = this.memberRaw.page_sum_max_win
            } else {
              sums[index] = 0
            }

            return
          }
          const values = data.map(item => Number(item[column.property]))
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
            sums[index] += ' '
          } else {
            sums[index] = ''
          }
        })
        return sums
      },
      // 时间戳转换
      time(data) {
        var time = new Date(data * 1000)
        var myDate = new Date(time)
        var day = myDate.getDate()
        if (day < 10) day = '0' + day
        var s = myDate.getHours()
        var f = myDate.getMinutes()
        var m = myDate.getSeconds()
        if (s < 10) s = '0' + s
        if (f < 10) f = '0' + f
        if (m < 10) m = '0' + m
        var HMS = s + ':' + f + ':' + m
        return HMS
      },
      async fetchData(value) {
        this.currentPage = value
        await this.$store.dispatch('MemberOrdersRaw', {
          page: this.currentPage,
          'per-page': this.pageSize,
        })
      },
      // 当前页变化
      async handleCurrentChange(value) {
        this.currentPage = value
        await this.fetchData()
      },

      // 每页显示数量变化
      async handleSizeChange(value) {
        this.pageSize = value
        await this.fetchData()
      },
    },
    watch: {
      $route(to, from) {
      },
    },
  }
</script>
<style scoped>
  .content {
    padding: 5px;
    margin-left: 190px;
    width: 884px;
  }
  .myTable{
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin: 2px  0;
    font-size:12px;
  }
  .Purple{
    color: #9932cd;
    font-weight: bold;
  }
  .Red{
    color: red;
    font-weight: bold;
  }
  .myTable th{
    height: 25px;
    text-align: center;
    color: #131950;
    font-weight: bold;
    line-height: 25px;
    padding-left: 10px;
    padding-right: 10px;
    margin: 0;
  }
  .myTable td{
    color: #131950;
    line-height: 25px;
    padding: 5px;
    box-sizing: border-box;
    text-align: center;
  }
  .myTable ul li{
    line-height: 15px;
  }
  .greenLi{
    color: #299a26;
    font-weight: bold;
  }
  .redSpan{
    color:red;
    font-weight: bold;

  }
  .blueSpan{
    color:blue;
    font-weight: bold;
  }
  .myTableTr{}
  .gameRules{
    max-width:150px;
    word-wrap: break-word;
    font-weight: bold;
  }
  .bottomPagination input[type='number']{
    width:80px;
  }
  .bottomPagination button{
    border:none;
    background-color: rgba(0,0,0,0);
  }
  .active{
    color:blue;
    cursor: pointer;
  }
</style>

